<!-- 
*   @Description:运行统计数据
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div>
    <titleHeader tilte="社区平台天气运行数据"></titleHeader>
    <div class="runData_content">
      <div class="cont_box" v-for="(item, index) in dataAll" :key="index" @click="clickHandler">
        <img
          class="bgAidi"
          :src="require(`@/assets/img/bgAidi${item.imgIdex}.png`)"
        />
        <div class="cont_zuofei">
          <i :class="'qi-'+item.icon" class="icoDijia"></i>
          <div class="cont_text">
            <p>{{ item.title }}</p>
            <p>
              <span class="val">{{ item.val }}</span>
              <span class="danwei">{{ item.danwei }}</span>
            </p>
            <p>{{ convertDate(dataTime) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import titleHeader from "@/components/titleHeader.vue";
import { convertDate,converScale,convertToChineseNumeral } from '@/components/config/index'
import { listAccount,listWeather } from "@/api/requ.js";
export default {
  name: "runData",
  components: {
    titleHeader,
  },
  mounted(){
    // this.getCitybctuon()
    this.getWeather()
  },
  data() {
    return {
      dataAll: [
          { title: "当日天气温度", danwei: "­°C", val:'--', imgIdex: 1,icon:'1030' },
          { title: "当前小时累计降水量", danwei: "­mm", val: '--', imgIdex: 2,icon:'2007' },
          { title: "相对湿度", danwei: "%rh", val: '--', imgIdex: 3,icon:'2019' },
          { title: "天气状况", danwei: "", val: '--', imgIdex: 4,icon:'100' },
          { title: "风力等级", danwei: "", val: '--', imgIdex: 6,icon:'1002' },
          { title: "能见度", danwei: "公里", val: '--', imgIdex: 5,icon:'1060' },
        ],
      dataTime:'',
      className:'qi-104'
    };
  },
  methods: {
    convertDate,
    getCitybctuon() {    
      listAccount({ location: "龙口" }).then((res) => {
        console.log(res);
        console.log("经纬度",res.data.location[0].lat,res.data.location[0].lon);
      });
    },
    getWeather() {      
      listWeather({ location: process.env.VUE_APP_SERVICE_CITY }).then((res) => {
        if(res.data.code != '200') return
        console.log(res);
        let obj = res.data.now 
        let windPower = `${convertToChineseNumeral(obj.windScale)}级 ${converScale(obj.windScale)}`
        this.dataAll=[
          { title: "当日天气温度", danwei: "­°C", val:obj.temp, imgIdex: 1,icon:'1030' },
          { title: "当前小时累计降水量", danwei: "­mm", val: obj.precip, imgIdex: 2,icon:'2007' },
          { title: "相对湿度", danwei: "%rh", val: obj.humidity, imgIdex: 3,icon:'2019' },
          { title: "天气状况", danwei: "", val: obj.text, imgIdex: 4,icon:obj.icon },
          { title: "风力等级", danwei: "", val: windPower, imgIdex: 6,icon:'1002' },
          { title: "能见度", danwei: "公里", val: obj.vis, imgIdex: 5,icon:'1060' },
        ]
        this.dataTime = obj.obsTime
      });
    },
    clickHandler(){
      window.open(`${process.env.VUE_APP_SERVICE_ADDRWESS}/weatherPage`,'_blank')
      // this.$router.push('/weatherPage','_blank')
    }
  },
};
</script>

<style scoped lang="less">
.runData_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 25px;
  background-color: #fff;
  .cont_box {
    width: 196px;
    height: 220px;
    position: relative;
    top:0;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0px 0px 20px 0px rgba(17, 26, 52, 0.1);
    transition: all 0.2s ease-in;
    &:hover{
      transform: scale(1.03);
      top:-5px
    }
    .bgAidi {
      width: 122px;
      height: 122px;
      position: absolute;
      right: 0px;
      opacity: 0.4;
    }
    .cont_zuofei {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .icoDijia {
        width: 60px;
        font-size: 60px;
        line-height: 60px;
        text-align: center;
        margin-bottom: 22px;
      }
      .cont_text {
        text-align: center;
        p {
          &:first-child {
            font: 400 14px/22px "PingFang SC";
            color: #4f5566;
          }
          &:nth-child(2) {
            margin: 5px 0px;
            .val {
              display: inline-block;
              margin-right: 4px;
              font: 600 20px/24px "PingFang SC";
              color: #111a34;
            }
            .danwei {
              font: 400 12px/18px "PingFang SC";
              color: #4f5566;
            }
          }
          &:last-child {
            font: 400 12px/18px "PingFang SC";
            color: #828899;
          }
        }
      }
    }
  }
}
</style>
